<script>
  import $ from '../dfish.js'
  import {
    h
  } from 'vue'
  import WidgetBase from './WidgetBase.vue'
  import Vertical from './Vertical.vue'

  export default {
    name: 'w-img',
    pubParentName: 'w-album',
    mixins: [WidgetBase],
    inject: ['providePubParent'],
    props: ['src', 'text', 'square', 'imgWidth', 'imgHeight', 'dataUrl', 'vertical'],
    data() {
      return {
        hover: false
      }
    },
    methods: {
      x_default() {
        return {
          vertical: true,
        }
      },
      onerror(e) {
        if (this.dataUrl) e.target.src = this.dataUrl
      },
      html_slots() {
        let src = this.x.src
        let font = src && src.startsWith('.') && !src.includes('/')
        let svg = src && src.startsWith('#')
        let cont = this.$slots.default || (this.x.text ? {
          default: () => this.x.text
        } : null)
        src = src || this.dataUrl
        return [
          src && h('div', {
            class: 'w-img-gut',
          }, [font ? h('i', {
              class: 'w-img-icon ' + src.replace(/\./g, '')
            }) :
            svg ? h('svg', {
              class: 'f-svg ' + src.slice(1)
            }, h('use', {
              'xlink:href': src,
            })) :
            h('img', {
              ref: 'img',
              src: src,
              class: 'w-img-icon',
              onerror: this.onerror,
            }),
            this.$slots.cover && h('div', {
              class: 'w-img-cover f-abs-full'
            }, this.$slots.cover())
          ]),
          cont && h(Vertical, {
            class: 'w-img-description'
          }, cont)
        ]
      }
    },
    computed: {
      isCurrent() {
        return this.pubParent && this.pubParent.inCurrent(this)
      },
      html_props() {
        let w = $.unitSize(this.x.imgWidth ? this.x.imgWidth : this.x.width)
        let h = $.unitSize(this.x.imgHeight ? this.x.imgHeight : this.x.height)
        return {
          class: {
            'z-hv': this.hover,
              'z-on': this.isCurrent,
              'z-square': this.x.square,
              'z-canplay': this.x.canPlay,
              'z-vertical': this.x.vertical,
              [`f-${this.x.vertical?'v':'h'}-gap`]: $.br.compat.gap,
          },
          style: {
            '--w-img-icon-width': w,
            '--w-img-icon-height': h,
          },
          onmouseenter: e => this.hover = true,
          onmouseleave: e => this.hover = false
        }
      }
    }
  }
</script>

<style>
  .w-img {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    --w-compat-gap: 10px;
    gap: var(--w-compat-gap);
  }

  .w-img.z-vertical {
    flex-direction: column;
    --w-compat-gap: 7px;
  }

  .w-img-gut {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .w-img-gut img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--w-img-icon-width, 100%);
    height: var(--w-img-icon-height);
  }
  
  .w-img .f-svg {
    width: var(--w-img-icon-width, 18px);
    height: var(--w-img-icon-height, 18px) ;
  }

  .w-img.z-square .w-img-gut {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
  }

  .w-img.z-square .w-img-icon {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  .w-img-icon {
    display: block;
    object-fit: cover;
    line-height: 1;
  }

  .w-img-cover {}

  .w-img-description {}

  .w-img.z-vertical>.w-img-description {
    width: 100%;
    text-align: center;
  }
</style>
